import React, { Component } from 'react'
import { Text, View, TouchableOpacity, Button } from 'react-native'
import { createStackNavigator } from '@react-navigation/stack';
import WithFooter from '../components/WithFooter'
import ImagePicker from 'react-native-image-picker';

import Home from '../screens/Home'
import ScanDemoScreen from '../screens/ScanDemo'
import CameraDemoScreen from '../screens/CameraDemo'

// 使用高阶组件
const HomeScreen = WithFooter(Home)

const Stack = createStackNavigator();

export default class HomeStack extends Component {
  constructor(props) {
    super(props)

  }

  takePicture = () => {
    let options = {
      title: '拍照'
    }
    ImagePicker.launchCamera(options, (response) => {
      console.log('Response = ', response);

      if (response.didCancel) {
        console.log('User cancelled video picker');
      } else if (response.error) {
        console.log('ImagePicker Error: ', response.error);
      } else if (response.customButton) {
        console.log('User tapped custom button: ', response.customButton);
      } else {
        console.log('response', response)
      }
    })
  }

  choosePicker = () => {
    const options = {
      title: '请选择',
      quality: 0.8,
      cancelButtonTitle: '取消',
      takePhotoButtonTitle: null,
      chooseFromLibraryButtonTitle: '选择相册',
      allowsEditing: true,
      noData: false,
      storageOptions: {
        skipBackup: true,
        path: 'images',
      },
    };

    ImagePicker.showImagePicker(options, (response) => {
      console.log('Response = ', response);
      if (response.didCancel) {
        console.log('User cancelled image picker');
      } else if (response.error) {
        console.log('ImagePicker Error: ', response.error);
      } else if (response.customButton) {
        this.onClickModal();
      } else {
        if (response.uri) {
          var path = response.path;
          if (!path) {
            path = response.uri;
          }
          alert(path)
        }
      }
    });
  };

  render() {
    return (
      <Stack.Navigator>
        <Stack.Screen
          name="Home"
          component={HomeScreen}  
          options={{
            title: '首页',
            headerStyle: {
              backgroundColor: '#00b38a',
              borderBottomColor: '#00b38a',
              borderBottomWidth: 0,
              elevation: 0, // 删除 Android 上的阴影
              shadowOpacity: 0, // 删除 iOS 上的阴影
            },
            headerTintColor: '#fff',
            headerTitleStyle: {
              fontSize: 18,
              fontWeight: 'bold',
            },
            headerRight: () => ( // 声明头部右侧内容
              <TouchableOpacity onPress={() => this.takePicture()} >
                <Text style={{fontSize: 18, fontWeight: 'bold', color: 'white', marginRight: 10}}>拍照</Text>
              </TouchableOpacity>
            ),
          }}
        />
        <Stack.Screen name="ScanDemo" component={ScanDemoScreen}
          options={{
            title: '扫一扫',
            headerRight: () => (
              <View >
                <Button
                  title="+"
                  onPress={() => this.choosePicker()}
                />
              </View>
            ),
          }}
        />
        <Stack.Screen name="CameraDemo" component={CameraDemoScreen} />
      </Stack.Navigator>
    )
  }
}
